<template>
     <div class="layoutLargeScreenBox">
          <div class="headerBox">
               <Header :menuList="userStore.menuRoutes"></Header>
          </div>
          <div class="contentBox">
               <div class="mainBox">
                    <Main></Main>
               </div>
          </div>
     </div>
</template>

<script setup lang="ts">
import Main from './main/index.vue'
import Header from './header/index.vue'
import useUserStore from '@/store/modules/user'
import router from '@/router'
let userStore = useUserStore()
// 获取当前路由的meta信息
let activeRoute = ref(router.currentRoute.value.meta)
watch(router.currentRoute, (newRoute) => {
     activeRoute.value = newRoute.meta
})
</script>

<style scoped lang="scss">
.layoutLargeScreenBox {
     width: 100%;
     height: 100vh;
     background-color: var(--layout-theme-color);
     overflow: hidden;

     .headerBox {
          width: 100%;
          height: 65px;
          z-index: 999;
     }

     .contentBox {
          width: 100%;
          height: calc(100% - 65px);
          padding: 5px 10px 10px 10px;
          overflow: hidden;

          .mainBox {
               background-color: var(--mainBox-theme-color);
               height: 100%;
               width: 100%;
               border-radius: 5px;
               padding: 10px;
          }
     }
}
</style>
